<template>
<div style="display: flex;align-items: center;paddingLeft:20px;">
  <el-tooltip :open-delay="1000" v-if="nextTicketType.replace('dataset','')  === 'nextTicket'"
              placement="top">
    <div slot="content">{{$t('custom.component.gadget.rejectNewTicketList')}}</div>
    <i style="font-size:20px" class="cuifont icon_ticket_list_dimiss cursor_pointer" @click="openDialog"></i>
  </el-tooltip>

  <el-dialog :title="$t('custom.component.gadget.rejectTicket')"
             :visible.sync="rejectDialogVisible"
             width="560px"
             :append-to-body="true"
             :before-close="resetForm">
    <p style="margin:0 0 10px">{{$t('custom.component.gadget.whyRejectTicket')}}</p>
    <el-select v-model="reason"
               filterable
               allow-create
               popper-class="rejectTicketRecord"
               default-first-option
               style="width: 100%"
               :placeholder="$t('custom.component.gadget.selectReason')">
      <el-option v-for="item in reasonsOptions"
                 :key="item"
                 :label="item"
                 :value="item">
        <div class="options">
          <TextOverTooltip refName="textTooltip" :content="item" style="width:400px" placement="top"></TextOverTooltip>
          <el-popconfirm @confirm="deleteRejectRecord(item)"
                         :confirm-button-text="$t('custom.workSchedule.template.confirm')"
                         :cancel-button-text="$t('custom.workSchedule.template.cancel')"
                         :title="$t('custom.workSchedule.template.sureDeleteTips')">
            <div slot="reference"
                 @click.stop=""
                 class="delete_icon el-icon-delete"></div>
          </el-popconfirm>

        </div>
      </el-option>
    </el-select>
    <span slot="footer"
          class="dialog-footer">
                      <el-button size="mini"
                                 @click="resetForm">{{$t('cancel')}}</el-button>
                      <el-button size="mini"
                                 type="primary"
                                 @click="rejectTicket">{{$t('save')}}</el-button>
                    </span>
  </el-dialog>
  <el-dialog
    :title="$t('custom.component.gadget.returntoqueue')"
    :visible.sync="dialogVisible"
    width="60%"
    append-to-body
    :before-close="handleClose">
    <div v-loading="loading">
      <el-button :disabled="isNotShow" @click="handleAll" type="primary" style="margin-bottom:10px" size="small">{{$t('custom.component.gadget.returntoqueue')}}</el-button>
      <el-table
      ref="rejectTitcketTable"
        :data="rejectTitcketList"
        @selection-change="handleSelectionChange"
        border
        height="600"
        style="width: 100%">
        <el-table-column
         :selectable="selectableFun"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="ticketId"
          label="Ticket Id"
          width="150">
        </el-table-column>
        <el-table-column
          label="Reject Time"
          width="200">
          <template slot-scope="scope">{{ timeformat(scope.row.rejectTime) }}</template>
        </el-table-column>`
        <el-table-column
          prop="reason"
          label="Reason">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="Rejected By">
        </el-table-column>
        <el-table-column
          label="Action"
          width="120">
          <template slot-scope="scope">
            <el-button :disabled="!scope.row.valid" @click="handleClick(scope.row)" type="text" size="small">{{$t('custom.component.gadget.returntoqueue')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { GlobalTimeformat } from '@/utils/common'
import TextOverTooltip from '@/components/storybook/b-text-over-tooltip'
export default {
  name: 'reject-list',
  props: ['nextTicketType'],
  components:{
    TextOverTooltip
  },
  data () {
    return {
      rejectDialogVisible: false,
      dataLoading: false,
      reason: '',
      reasonsOptions: [],
      dialogVisible: false,
      rejectTitcketList: [],
      loading: false,
      isNotShow: true
    }
  },
  methods: {
    selectableFun(row,index) {
      return row.valid
    },
    handleSelectionChange(val) {
      if(val.length === 0) {
        this.isNotShow = true
      }else {
        this.isNotShow = false
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.rejectTitcketList = []
    },
    timeformat (time) {
      return GlobalTimeformat(time, null, 'MM/DD/YYYY hh:mm')
    },
    handleClick(row) {
      this.$confirm(this.$t('custom.component.gadget.twbrt'), this.$t('custom.component.gadget.returntoqueue'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        // type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        var params = {
          // ticketIds:[row.ticketId],
          type: this.nextTicketType,
          rejects: [
            {
              ticketId: row.ticketId,
              userId: row.userId
            }
          ],
        }
        this.$interface.apiService.postRejectTicketRecovery(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.$message.success('Success')
            this.getRejectTitcketList()
          }).catch(() => {  })
      })
    },
    handleAll() {
      let _self = this
      this.$confirm(this.$t('custom.component.gadget.twbrt'), this.$t('custom.component.gadget.returntoqueue'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        // type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        var params = {
          type: this.nextTicketType,
          rejects: _self.$refs.rejectTitcketTable.selection.map(i=> {
            return { ticketId: i.ticketId, userId: i.userId}
          })
        }
        this.$interface.apiService.postRejectTicketRecovery(params)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.$message.success('Success')
            this.getRejectTitcketList()
          }).catch(() => {  })
      })
    },
    openDialog() {
      this.dialogVisible = true
      this.getRejectTitcketList()
    },
    getDataList () {
      this.$emit('getDataList')
    },
    resetForm () {
      this.rejectDialogVisible = false
      this.reason = ''
    },
    rejectTicket () {
      const param = {
        ticketId: this.nextTicketInfo ? this.nextTicketInfo.id ? this.nextTicketInfo.id : '' : '',
        reason: this.reason,
        identifier: this.searchIdentifier

      }
      // switch (this.nextTicketType) {
      //   case 'autotask':
      //     param.type = 'autotask'
      //     param.systemName = 2
      //     break
      //   case 'nextTicket':
      //     param.type = 'nextTicket'
      //     param.systemName = 1
      //     break
      //   case 'syncro':
      //     param.type = 'syncro'
      //     param.systemName = 3
      //     break
      //   case 'kaseyabms':
      //     param.type = 'kaseyabms'
      //     param.systemName = 4
      //     break
      //   default:
      // }
      param.type = this.nextTicketType
      this.$interface.apiService.postRejectTicketData(param).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.getDataList()
        this.resetForm()
        this.getReasonsOptions()
      })
    },
    getReasonsOptions () {
      const tenantCode = this.$store.state.user.tenantCode
      this.$interface.apiService.getReasonsOptionsList(tenantCode, this.nextTicketType).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.reasonsOptions = res.data.filter(v=>v.trim())
      })
    },
    getRejectTitcketList () {
      this.loading = true
      this.$interface.apiService.getRejectTitcketList(this.nextTicketType).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.rejectTitcketList = res.data
      })
    },
    deleteRejectRecord (item) {
      let params = {
        reason: item,
        type: this.nextTicketType
      }
      this.$interface.apiManager.deleteRejectReason(params, this.$store.state.user.tenantCode).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message.success(this.$t('custom.component.datasetsqlmodel.success'))
        this.getReasonsOptions()
      })
    }
  },
  created () {
    this.getReasonsOptions()
  }
}
</script>

<style scoped>
.requestbtn {
  width: 149px;
  border-radius: 2px;
}
.rejectbtn {
  /* width: 150px; */
  background: #f56c6c;
  border-radius: 2px;
  background-color: #f56c6c;
  border: #f56c6c;
  margin-left: 20px;
}
.rejectTicketRecord .options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rejectTicketRecord .options .delete_icon {
  display: none;
}
.rejectTicketRecord .options:hover .delete_icon {
  display: block;
}
</style>
